<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基于Raphael.js的svg多功能地图插件 - 【科e互联】</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/raphael-min.js"></script>
<script type="text/javascript" src="js/res/chinaMapConfig.js"></script>
<script type="text/javascript" src="js/res/worldMapConfig.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript">
$(function(){
	$('#ChinaMap').SVGMap({
		mapName: 'china'
	});

	$('#ChinaMap1').SVGMap({
		mapName: 'china',
		mapWidth: 1500,
		mapHeight: 1500
	});


	$('#ChinaMap2').SVGMap({
		mapName: 'china',
		stateData: {
	                'heilongjiang': {'stateInitColor': 1, 'baifenbi': 0.236},
	                'beijing': {'stateInitColor': 2},
	                'shanghai': {'stateInitColor': 3},
	                'tianjin': {'stateInitColor': 4},
	                'sichuan': {'stateInitColor': 5},
	                'shandong': {'stateInitColor': 6},
	                'shanxi': {'stateInitColor': 3},
	                'zhejiang': {'stateInitColor': 4},
	                'jiangshu': {'stateInitColor': 2},
	                'hunan': {'stateInitColor': 4},
	                'guizou': {'stateInitColor': 5},
	                'neimenggu': {'stateInitColor': 6},
	                'henan': {'stateInitColor': 3},
	                'gansu': {'stateInitColor': 4},
	                'ningxia': {'stateInitColor': 2},
	                'jilin': {'diabled': true}
            	}
	});


	$('#ChinaMap3').SVGMap({
		mapName: 'china',
        stateDataType: 'xml',
        stateSettingsXmlPath: 'js/res/chinaMapSettings.xml'
	});


	$('#ChinaMap4').SVGMap({
        stateTipHtml: function(stateData, obj){
            return 'id:' + ((stateData)[obj.id] && (stateData)[obj.id].baifenbi || obj.id) + '<br/>name:' + obj.name;
        }
	});


	$('#ChinaMap5').SVGMap({
        hoverCallback: function(stateData, obj){
            $('#HoverCallback').html('hover:'+obj.name);
        }
	});

	$('#ChinaMap6').SVGMap({
        clickCallback: function(stateData, obj){
            $('#ClickCallback').html('点击了：'+obj.name);
        }
	});

	// 外部控制地图
	var mapObj = {};
	$('#ChinaMap7').SVGMap({
        external: mapObj
	});
	$('#ChangeMap').click(function(){
		mapObj.shandong.attr({fill: '#111'});
		mapObj.shandong.mouseout(function(){
			this.animate({
                fill: '#ddd'
            }, 250);
		});
	});
	$('#ChangeMap1').click(function(){
		mapObj.sichuan.attr({fill: '#00f'});
		mapObj.sichuan.mouseout(function(){
			this.animate({
                fill: '#f0f'
            }, 250);
		});
	});

	$('#ChinaMap8').SVGMap({
        showTip: false
	});


	
		
	// $.ajax({
	// 	url: projectName+'/idea123Action.do?method=getIdea123MapData&reportName='+reportName,
	// 	data: data,
	// 	dataType: 'json',
	// 	success: function(data){

	var data = {"jiangsu":{"value":"30.05%","index":"1","stateInitColor":"0"},"henan":{"value":"19.77%","index":"2","stateInitColor":"0"},"anhui":{"value":"10.85%","index":"3","stateInitColor":"0"},"zhejiang":{"value":"10.02%","index":"4","stateInitColor":"0"},"liaoning":{"value":"8.46%","index":"5","stateInitColor":"0"},"beijing":{"value":"4.04%","index":"6","stateInitColor":"1"},"hubei":{"value":"3.66%","index":"7","stateInitColor":"1"},"jilin":{"value":"2.56%","index":"8","stateInitColor":"1"},"shanghai":{"value":"2.47%","index":"9","stateInitColor":"1"},"guangxi":{"value":"2.3%","index":"10","stateInitColor":"1"},"sichuan":{"value":"1.48%","index":"11","stateInitColor":"2"},"guizhou":{"value":"0.99%","index":"12","stateInitColor":"2"},"hunan":{"value":"0.78%","index":"13","stateInitColor":"2"},"shandong":{"value":"0.7%","index":"14","stateInitColor":"2"},"guangdong":{"value":"0.44%","index":"15","stateInitColor":"2"},"jiangxi":{"value":"0.34%","index":"16","stateInitColor":"3"},"fujian":{"value":"0.27%","index":"17","stateInitColor":"3"},"yunnan":{"value":"0.23%","index":"18","stateInitColor":"3"},"hainan":{"value":"0.21%","index":"19","stateInitColor":"3"},"shanxi":{"value":"0.11%","index":"20","stateInitColor":"3"},"hebei":{"value":"0.11%","index":"21","stateInitColor":"4"},"neimongol":{"value":"0.04%","index":"22","stateInitColor":"4"},"tianjin":{"value":"0.04%","index":"23","stateInitColor":"4"},"gansu":{"value":"0.04%","index":"24","stateInitColor":"4"},"shaanxi":{"value":"0.02%","index":"25","stateInitColor":"4"},"macau":{"value":"0.0%","index":"26","stateInitColor":"7"},"hongkong":{"value":"0.0%","index":"27","stateInitColor":"7"},"taiwan":{"value":"0.0%","index":"28","stateInitColor":"7"},"qinghai":{"value":"0.0%","index":"29","stateInitColor":"7"},"xizang":{"value":"0.0%","index":"30","stateInitColor":"7"},"ningxia":{"value":"0.0%","index":"31","stateInitColor":"7"},"xinjiang":{"value":"0.0%","index":"32","stateInitColor":"7"},"heilongjiang":{"value":"0.0%","index":"33","stateInitColor":"7"},"chongqing":{"value":"0.0%","index":"34","stateInitColor":"7"}};
			var i = 1;
			for(k in data){
				if(i <= 12){
					var _cls = i < 4 ? 'active' : ''; 
					$('#MapControl .list1').append('<li name="'+k+'"><div class="mapInfo"><i class="'+_cls+'">'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}else if(i <= 24){
					$('#MapControl .list2').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}else{
					$('#MapControl .list3').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}
			}

			var mapObj_1 = {};
			var stateColorList = ['003399', '0058B0', '0071E1', '1C8DFF', '51A8FF', '82C0FF', 'AAD5ee', 'AAD5FF'];
			
			$('#RegionMap').SVGMap({
				external: mapObj_1,
				mapName: 'china',
				mapWidth: 350,
				mapHeight: 350,
				stateData: data,
				// stateTipWidth: 118,
				// stateTipHeight: 47,
				// stateTipX: 2,
				// stateTipY: 0,
				stateTipHtml: function (mapData, obj) {
					var _value = mapData[obj.id].value;
					var _idx = mapData[obj.id].index;
					var active = '';
					_idx < 4 ? active = 'active' : active = '';
					var tipStr = '<div class="mapInfo"><i class="' + active + '">' + _idx + '</i><span>' + obj.name + '</span><b>' + _value + '</b></div>';
					return tipStr;
				}
			});
			$('#MapControl li').hover(function () {
				var thisName = $(this).attr('name');
				
				var thisHtml = $(this).html();
				$('#MapControl li').removeClass('select');
				$(this).addClass('select');
				$(document.body).append('<div id="StateTip"></div');
				$('#StateTip').css({
					left: $(mapObj_1[thisName].node).offset().left - 50,
					top: $(mapObj_1[thisName].node).offset().top - 40
				}).html(thisHtml).show();
				mapObj_1[thisName].attr({
					fill: '#E99A4D'
				});
			}, function () {
				var thisName = $(this).attr('name');

				$('#StateTip').remove();
				$('#MapControl li').removeClass('select');
				mapObj_1[$(this).attr('name')].attr({
					fill: "#" + stateColorList[data[$(this).attr('name')].stateInitColor]
				});
			});
			
			$('#MapColor').show();
	// 	}
	// });


	$('#WorldMap').SVGMap({
		mapName: 'world',
		mapWidth: 600,
		mapHeight: 400
	});
});
</script>
</head>
<body class="keBody">
<h1 class="keTitle">基于Raphael.js的svg多功能地图插件</h1>
<div class="kePublic">
<!--效果html开始-->
	<div class="wrap">
		<h1>SVG 地图（By Rocky）</h1>


		<div class="items" id="Item0">
            <h2>中国地图--默认</h2>
            <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
            	<div id="ChinaMap"></div>
	            <pre class="brush:js">
		            $('#ChinaMap').SVGMap({
						mapName: 'china'
					});
                </pre>
	        </div>
	    </div>
	    
	    
	    <div class="items" id="Item1">
	        <h2>自定义宽高</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
	           <div id="ChinaMap1"></div>
	            <pre class="brush:js">
$('#ChinaMap1').SVGMap({
	mapName: 'china',
	mapWidth: 600,
	mapHeight: 500
});
                </pre>
	        </div>
        </div>
	    
	    
	    <div class="items" id="Item2">
	        <h2>自定义数据-json</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
	            <div id="ChinaMap2"></div>

	            <pre class="brush:js">
$('#ChinaMap2').SVGMap({
		mapName: 'china',
		stateData: {
	                'heilongjiang': {'stateInitColor': 1, 'baifenbi': 0.936},
	                'beijing': {'stateInitColor': 2},
	                'shanghai': {'stateInitColor': 3},
	                'tianjin': {'stateInitColor': 4},
	                'sichuan': {'stateInitColor': 5},
	                'shandong': {'stateInitColor': 6},
	                'shanxi': {'stateInitColor': 3},
	                'zhejiang': {'stateInitColor': 4},
	                'jiangshu': {'stateInitColor': 2},
	                'hunan': {'stateInitColor': 4},
	                'guizou': {'stateInitColor': 5},
	                'neimenggu': {'stateInitColor': 6},
	                'henan': {'stateInitColor': 3},
	                'gansu': {'stateInitColor': 4},
	                'ningxia': {'stateInitColor': 2},
	                'jilin': {'diabled': true}
            	}
	});
                </pre>
	        </div>
	    </div>
	    
	    <div class="items" id="Item3">
	        <h2>自定义数据-xml</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
	            <div id="ChinaMap3"></div>
	            <pre class="brush:js">
$('#ChinaMap3').SVGMap({
	mapName: 'china',
	stateDataType: 'xml',
	stateSettingsXmlPath: 'js/res/chinaMapSettings.xml'
});
                </pre>
	        </div>
	    </div>
	    
	    
	    <div class="items" id="Item4">
	        <h2>提示自定义</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
            	<div id="ChinaMap4"></div>
	            <pre class="brush:js">
$('#ChinaMap4').SVGMap({
	stateTipHtml: function(stateData, obj){
		return 'id:' + ((stateData)[obj.id] && (stateData)[obj.id].baifenbi || obj.id) + '<br/>name:' + obj.name;
	}
});
                </pre>
	        </div>
	    </div>
	    
	    <div class="items" id="Item5">
	        <h2>hover回调</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
            	<div id="HoverCallback" style="font-size:14px; color:red"></div>
            	<div id="ChinaMap5"></div>
	            <pre class="brush:js">
$('#ChinaMap5').SVGMap({
       hoverCallback: function(stateData, obj){
           $('#HoverCallback').html('hover:'+obj.name);
       }
});
                </pre>
	        </div>
	    </div>
	    
	    <div class="items" id="Item6">
	        <h2>click回调</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
            	<div id="ClickCallback" style="font-size:14px; color:red"></div>
            	<div id="ChinaMap6"></div>
	            <pre class="brush:js">
$('#ChinaMap6').SVGMap({
       clickCallback: function(stateData, obj){
           $('#ClickCallback').html('点击了：'+obj.name);
       }
});
                </pre>
	        </div>
	    </div>
	    
	    <div class="items" id="Item7">
	        <h2>外部事件改变地图内容</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
				<a id="ChangeMap" href="javascript:;" style="line-height:30px;">&nbsp;&nbsp;改变山东的颜色</a>
	    		<a id="ChangeMap1" href="javascript:;" style="line-height:30px;">&nbsp;&nbsp;改变四川的颜色</a>
            	<div id="ChinaMap7"></div>
	            <pre class="brush:js">
var mapObj = {};
	$('#ChinaMap7').SVGMap({
        external: mapObj
	});
	$('#ChangeMap').click(function(){
		mapObj.shandong.attr({fill: '#111'});
		mapObj.shandong.mouseout(function(){
			this.animate({
                fill: '#ddd'
            }, 250);
		});
	});
	$('#ChangeMap1').click(function(){
		mapObj.sichuan.attr({fill: '#00f'});
		mapObj.sichuan.mouseout(function(){
			this.animate({
                fill: '#f0f'
            }, 250);
		});
	});
                </pre>
	        </div>
	    </div>
	    
	    <div class="items" id="Item8">
	        <h2>不显示提示</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
            	<div id="ChinaMap8"></div>
	            <pre class="brush:js">
$('#ChinaMap8').SVGMap({
        showTip: false
	});

                </pre>
	        </div>
	    </div>

	    <div class="items" id="Item9">
	        <h2>外部控制</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
<style type="text/css">
.regionList{float:left; margin-top:15px;}
.regionList ul{float:left; width:110px; height:100%; margin-right:5px; display:inline; font-family:"微软雅黑"}
.regionList ul li{ height:24px; margin-left:10px; padding:0 0px; border:1px solid #fff; line-height:24px;}
.regionList ul li.select{border:1px solid #D3D3D3; background:#FFF1BF}

.mapInfo i{ display:inline-block; width:15px; height:15px; margin-top:5px; line-height:15px; font-style:normal; background:#aeaeae; color:#fff; font-size:11px; font-family: Tahoma; -webkit-border-radius:15px; border-radius:15px; text-align:center}
.mapInfo i.active{background:#E27F21;}
.mapInfo span{ padding:0 5px 0 3px;}
.mapInfo b{ font-weight:normal; color:#2770B5}

.regionMap{float:left; margin-left:70px; display:inline;}
</style>
				<div id="Region" style="position:relative; height:360px;">
					<div class="regionList" id="MapControl">
						<ul class="list1"></ul>
						<ul class="list2"></ul>
						<ul class="list3"></ul>
					</div>
					<div class="regionMap" id="RegionMap"></div>
					<div id="MapColor" style=" display:none; float:left; width:30px; height:180px; margin:80px 0 0 10px; display:inline; background:url(images/map_color.png) center 0;"></div>
				</div>
            	
	            <pre class="brush:js">

	var data = {"jiangsu":{"value":"30.05%","index":"1","stateInitColor":"0"},"henan":{"value":"19.77%","index":"2","stateInitColor":"0"},"anhui":{"value":"10.85%","index":"3","stateInitColor":"0"},"zhejiang":{"value":"10.02%","index":"4","stateInitColor":"0"},"liaoning":{"value":"8.46%","index":"5","stateInitColor":"0"},"beijing":{"value":"4.04%","index":"6","stateInitColor":"1"},"hubei":{"value":"3.66%","index":"7","stateInitColor":"1"},"jilin":{"value":"2.56%","index":"8","stateInitColor":"1"},"shanghai":{"value":"2.47%","index":"9","stateInitColor":"1"},"guangxi":{"value":"2.3%","index":"10","stateInitColor":"1"},"sichuan":{"value":"1.48%","index":"11","stateInitColor":"2"},"guizhou":{"value":"0.99%","index":"12","stateInitColor":"2"},"hunan":{"value":"0.78%","index":"13","stateInitColor":"2"},"shandong":{"value":"0.7%","index":"14","stateInitColor":"2"},"guangdong":{"value":"0.44%","index":"15","stateInitColor":"2"},"jiangxi":{"value":"0.34%","index":"16","stateInitColor":"3"},"fujian":{"value":"0.27%","index":"17","stateInitColor":"3"},"yunnan":{"value":"0.23%","index":"18","stateInitColor":"3"},"hainan":{"value":"0.21%","index":"19","stateInitColor":"3"},"shanxi":{"value":"0.11%","index":"20","stateInitColor":"3"},"hebei":{"value":"0.11%","index":"21","stateInitColor":"4"},"neimongol":{"value":"0.04%","index":"22","stateInitColor":"4"},"tianjin":{"value":"0.04%","index":"23","stateInitColor":"4"},"gansu":{"value":"0.04%","index":"24","stateInitColor":"4"},"shaanxi":{"value":"0.02%","index":"25","stateInitColor":"4"},"macau":{"value":"0.0%","index":"26","stateInitColor":"7"},"hongkong":{"value":"0.0%","index":"27","stateInitColor":"7"},"taiwan":{"value":"0.0%","index":"28","stateInitColor":"7"},"qinghai":{"value":"0.0%","index":"29","stateInitColor":"7"},"xizang":{"value":"0.0%","index":"30","stateInitColor":"7"},"ningxia":{"value":"0.0%","index":"31","stateInitColor":"7"},"xinjiang":{"value":"0.0%","index":"32","stateInitColor":"7"},"heilongjiang":{"value":"0.0%","index":"33","stateInitColor":"7"},"chongqing":{"value":"0.0%","index":"34","stateInitColor":"7"}};
			var i = 1;
			for(k in data){
				if(i &lt;= 12){
					var _cls = i &lt; 4 ? 'active' : ''; 
					$('#MapControl .list1').append('<li name="'+k+'"><div class="mapInfo"><i class="'+_cls+'">'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}else if(i &lt;= 24){
					$('#MapControl .list2').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}else{
					$('#MapControl .list3').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}
			}

			var mapObj_1 = {};
			var stateColorList = ['003399', '0058B0', '0071E1', '1C8DFF', '51A8FF', '82C0FF', 'AAD5FF'];
			
			$('#RegionMap').SVGMap({
				external: mapObj_1,
				mapName: 'china',
				mapWidth: 350,
				mapHeight: 350,
				stateData: data,
				// stateTipWidth: 118,
				// stateTipHeight: 47,
				// stateTipX: 2,
				// stateTipY: 0,
				stateTipHtml: function (mapData, obj) {
					var _value = mapData[obj.id].value;
					var _idx = mapData[obj.id].index;
					var active = '';
					_idx &lt; 4 ? active = 'active' : active = '';
					var tipStr = '<div class="mapInfo"><i class="' + active + '">' + _idx + '</i><span>' + obj.name + '</span><b>' + _value + '</b></div>';
					return tipStr;
				}
			});
			$('#MapControl li').hover(function () {
				var thisName = $(this).attr('name');
				
				var thisHtml = $(this).html();
				$('#MapControl li').removeClass('select');
				$(this).addClass('select');
				$(document.body).append('<div id="StateTip">&lt;/div');

				$('#StateTip').css({
					left: $(mapObj_1[thisName].node).offset().left - 50,
					top: $(mapObj_1[thisName].node).offset().top - 40
				}).html(thisHtml).show();
				mapObj_1[thisName].attr({
					fill: '#E99A4D'
				});
			}, function () {
				var thisName = $(this).attr('name');
				$('#StateTip').remove();
				$('#MapControl li').removeClass('select');
				mapObj_1[$(this).attr('name')].attr({
					fill: "#" + stateColorList[data[$(this).attr('name')].stateInitColor]
				});
			});
			
			$('#MapColor').show();
                </pre>
	        </div>
	    </div>
	    
	    <div class="items" id="Item9">
	        <h2>世界地图</h2>
	        <a href="javascript:;" class="fold"></a>
            <div class="itemCon">
            	<div id="WorldMap"></div>
	            <pre class="brush:js">
$('#WorldMap').SVGMap({
		mapName: 'world',
		mapWidth: 600,
		mapHeight: 400
	});
                </pre>
	        </div>
	    </div>
		

    </div>

<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css">
<script type="text/javascript" src="js/lib/SyntaxHighlighter.js"></script>
<!--效果html结束-->
<div class="clear"></div>
</div>
<div class="keBottom">
<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>
<p class="keTxtP">本站导航：
<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> |
<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> |
<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> |
<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> |
<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> |
<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> |
<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
</body>
</html>